<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://cn.vuejs.org/v2/guide/class-and-style.html</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div class="container" id="box">
    <div class="col-lg-12">
        <p v-bind:class="{'text-info':isActive}">Vue.js</p>
        <p v-bind:class="[red]">Vue.js</p>
        <p v-bind:style="{'font-size':fontSize+'px'}">Vue.js</p>
        <p v-bind:style="styleP">Vue.js</p>
        <p v-for="i in styles" v-bind:style="i">Vue.js</p>
        <p v-for="i in styles2" v-bind:class="i">Vue.js</p>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {
            isActive: true,
            red: 'text-danger',
            fontSize: 20,
            styleP: {
                'font-size': '3em',
                'color': 'rgba(80,200,120,0.5)'
            },
            styles: {
                p1: {
                    'font-size': '0.5em',
                    'color': 'rgba(100,100,100,0.5)'
                },
                p2: {
                    'font-size': '1em',
                    'color': 'rgba(110,190,100,0.8)'
                },
                p3: {
                    'font-size': '2em',
                    'color': 'rgba(10,90,200,0.8)'
                },
                p4: {
                    'font-size': '3em',
                    'color': 'rgba(210,90,100,0.8)'
                },
                p5: {
                    'font-size': '5em',
                    'color': 'rgba(110,100,100,0.8)'
                }
            },
            styles2: {
                red: 'text-danger',
                yellow: 'text-warning'
            }
        }
    })
</script>